<template>
	<view>
		<c-navBar title="首页" isTran isBack color="#FFFFFF"></c-navBar>

		<view>
			<u-swiper :list="bannerList" indicator indicatorMode="dot" circular height="520rpx"></u-swiper>
		</view>
		<view class="video">
			<view class="v_top">
				<view class="v_top_l">
					<image class="video_icon" src="/static/tabbar/video_icon.png" mode=""></image>
					视频
				</view>
				<view class="v_top_r" @click="$fn.jumpPage('/pages/home/pages/moreVideos')">
					全部
					<u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
				</view>
			</view>

			<scroll-view class="scroll-view_H" scroll-x>
				<view class="v_list">
					<view class="v_item" v-for="(v,i) in videoList" :key="i">
						<image class="img" :src="vuex_imgUrl+v.mainImg" mode=""></image>
						<view class="mask" @click="playVideoFn(v.videos)">
							<image class="play" src="/static/tabbar/play.png" mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>


		<view class="training">
			<view class="v_top">
				<view class="v_top_l">
					<image class="video_icon" src="/static/tabbar/hot_icon.png" mode=""></image>
					咨询
				</view>
				<view class="v_top_r" @click="goTraining">
					更多
					<u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="t_list" v-for="(v,i) in courseList" :key="i" @click="goInfoDetails(v)">
				<view class="t_list_l">
					<view class="t_name">{{v.title}}</view>
					<!-- <view class="look_num">
							<u-icon name="eye" color="#999999" size="32rpx"></u-icon>
							{{v.viewNum>10000?(v.viewNum/10000).toFixed(1)+'w':v.viewNum}}
						</view> -->
				</view>
				<image class="t_img" :src="vuex_imgUrl+v.mainImg" mode=""></image>
			</view>
		</view>

		<liu-drag-button @clickBtn="clickBtn">
			<image class="share_icon" src="/static/tabbar/share_icon.png" mode=""></image>
		</liu-drag-button>
		<!-- 分享 -->
		<c-share ref="share" />
		<!-- 播放视频 -->
		<c-playVideo :show.sync="playShow" :url="playUrl" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [],
				videoList: [],
				courseList: [],
				playUrl: '',
				playShow: false,

			}
		},
		onLoad(option) {
			console.log(option.q, '分享参数');
			if (option.q) {
				let param = decodeURIComponent(option.q)
				param = this.parseQueryString(decodeURIComponent(param).split('?')[1])
				console.log(param, '分享参数2');
				this.$u.vuex("vuex_shareUserId", param.shareUserId);
			}



		},
		onShow() {
			this.getBannerFn()
			this.getVideoListFn()
			this.getCourseListFn()
		},
		methods: {
			// 解析路径拼接
			parseQueryString(queryString) {
				// 创建一个空对象来存储结果
				const result = {};

				// 使用 & 分割查询字符串，得到一个数组
				const pairs = queryString.split('&');

				// 遍历数组中的每一对键值对
				pairs.forEach(pair => {
					// 使用 = 分割键和值
					const [key, value] = pair.split('=');

					// 解码键和值（如果需要的话）
					const decodedKey = decodeURIComponent(key);
					const decodedValue = decodeURIComponent(value);

					// 将解码后的键值对存入对象中
					result[decodedKey] = decodedValue;
				});

				return result;
			},


			// 获取轮播图
			getBannerFn() {
				this.$api.getBanner().then(res => {
					// console.log('获取轮播图', res);
					this.bannerList = res.data.carouselImgs.split(',').map(v => this.vuex_imgUrl + v)
				})
			},
			//小程序视频列表
			getVideoListFn() {
				this.$api.getVideoList({
					isHot: 1, //1-推荐,0-正常
					pageNum: 1,
					pageSize: 10
				}).then(res => {
					console.log('小程序视频列表', res);
					this.videoList = res.data.list
				})
			},
			// 播放视频
			playVideoFn(v) {
				this.playUrl = this.vuex_imgUrl + JSON.parse(v)[0];
				this.playShow = true
			},

			//小程序课程列表-培训
			getCourseListFn() {
				this.$api.getInfoList({
					isHot: 1, //1-推荐,0-正常
					pageNum: 1,
					pageSize: 10
				}).then(res => {
					console.log('小程序课程列表-培训', res);
					this.courseList = res.data.list
				})
			},

			clickBtn() {
				console.log('去分享');
				this.$refs.share.getSharePosterFn()
			},
			// 去咨询列表
			goTraining() {
				uni.navigateTo({
					url: '/pages/home/pages/infoList'
				})
			},
			// 去咨询详情
			goInfoDetails(v) {
				uni.setStorageSync('infoDetail', v)
				this.$fn.jumpPage('/pages/home/pages/infoDetails')
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-swiper__indicator.data-v-6b019429 {
		bottom: 40rpx;
	}

	.v_top {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;

		.v_top_l {
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #1A1A1A;

			.video_icon {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.v_top_r {
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}

	}

	.video {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: -20rpx;
		position: relative;
		border-bottom: 10rpx solid #F7F7F7;



		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			margin: 20rpx 0 8rpx;
			box-sizing: border-box;

			.v_list {
				display: flex;
				align-items: center;
				gap: 24rpx;

				.v_item {
					width: 448rpx;
					height: 252rpx;
					border-radius: 12rpx;
					position: relative;
					flex: none;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}

					.mask {
						width: 448rpx;
						height: 252rpx;
						background: rgba(0, 0, 0, 0.4);
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						top: 0;
						left: 0;

						.play {
							width: 56rpx;
							height: 56rpx;
						}
					}

				}

			}
		}
	}

	.training {
		padding: 40rpx 32rpx;
		box-sizing: border-box;

		.t_list {
			padding: 28rpx 0;
			border-bottom: 1rpx solid #E6E6E6;
			display: flex;
			align-items: center;
			gap: 34rpx;

			.t_list_l {
				flex: 1;
				height: 132rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.t_name {
					width: 100%;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.look_num {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.t_img {
				flex: none;
				width: 176rpx;
				height: 132rpx;
				border-radius: 4rpx;
			}

		}

		.no_more {
			color: #999;
			font-size: 24rpx;
			text-align: center;
			margin-top: 20rpx;
		}
	}

	.share_icon {
		width: 80rpx;
		height: 96rpx;
	}
</style>